/**
媒体的差异达到 $mediaStep 则算作变更了一步
$stepScale 一步的缩放比率
*/

$baseFontSize: 36px;
$baseViewportWidth: 1080px;
$mediaStep: 33;
$stepScale: 1;

@for $i from 0 through 12 {
    @if ($i == 12) {
        @media (min-width: $baseViewportWidth - 1 + $i * $mediaStep) {
            html {
                font-size: $baseFontSize + $i;
            }
        }

        @media (min-width: 0) and (max-width: $baseViewportWidth - 1 - $i * $mediaStep) {
            html {
                font-size: $baseFontSize - $i;
            }
        }
    } @else if ($i == 0) {
        @media (min-width: $baseViewportWidth + $i * $mediaStep) and (max-width: $baseViewportWidth + ($i + 1) * $mediaStep - 1) {
            html {
                font-size: $baseFontSize + $i;
            }
        }
    } @else {
        @media (min-width: $baseViewportWidth - $i * $mediaStep) and (max-width: $baseViewportWidth - ($i - 1) * $mediaStep - 1) {
            html {
                font-size: $baseFontSize - $i;
            }
        }

        @media (min-width: $baseViewportWidth + $i * $mediaStep) and (max-width: $baseViewportWidth + ($i + 1) * $mediaStep - 1) {
            html {
                font-size: $baseFontSize + $i;
            }
        }
    }
}

